<template>
	<div class="main-home">
		<!--		<h2>dept</h2>-->
		<div class="main-search">
			<el-form :model="data.searchForm" label-width="auto" inline style="text-align: left;">
				<el-form-item label="部门名称">
					<el-input v-model="data.searchForm.deptName" clearable style="width: 250px"
					          @blur="handleSearchClick"/>
				</el-form-item>
				<!--
									<el-form-item label="状态">
										<el-select v-model="data.searchForm.deptState" clearable placeholder="&#45;&#45;请选择&#45;&#45;"
												   style="width: 240px">
											<el-option label="正常" value="0"/>
											<el-option label="禁用" value="1"/>
										</el-select>
									</el-form-item>
				-->
				<el-form-item label="">
					<el-button icon="Search" type="primary" @click="handleSearchClick" round plain>搜索</el-button>
					<el-button icon="Refresh" @click="resetSearchClick" round plain>重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!--有数据-->
		<div>
			<div class="main-content">
				<h2 style="margin-bottom: 2vw">部门列表</h2>
				<div class="main-content-btn">
					<el-button type="primary" @click="handleAddClick(0)">新增公司</el-button>
					<el-popconfirm class="box-item" width="450"
					               title="这将选中部门删除，确定继续？【删除后将无法恢复，请谨慎操作】"
					               icon="" placement="top" confirm-button-type="danger" confirm-button-text="删除"
					               @confirm="handleDeleteList()"
					               persistent>
						<template #reference>
							<el-button type="danger">批量删除</el-button>
						</template>
						<template #actions="{ confirm, cancel }">
							<div class="btn-group" style="text-align: center">
								<el-button size="small" @click="cancel">取消</el-button>
								<el-button type="danger" size="small" @click="confirm">删除</el-button>
							</div>
						</template>
					</el-popconfirm>
				</div>
				<el-table :data="data.list" row-key="deptId" @selection-change="handleDeleteListClick"
				          highlight-current-row
				          default-expand-all stripe
				          style="width: 100%;">
					<el-table-column type="selection" width="55"/>
					<el-table-column prop="deptName" label="公司/部门" width="180" sortable/>
					<!--
										<el-table-column prop="deptState" label="状态" width="100" align="center">
											<template #default="scope">
												<el-tag v-if="!scope.row.deptState" type="success" disable-transitions>正常</el-tag>
												<el-tag v-else type="danger" disable-transitions>禁用</el-tag>
											</template>
										</el-table-column>
					-->
					<el-table-column prop="deptPrincipalId" label="负责人" width="80" align="center"/>
					<el-table-column prop="deptPrincipalPhone" label="负责人电话" width="180" align="center"/>
					<el-table-column prop="deptPrincipalEmail" label="负责人邮箱" width="180" align="center"/>
					<el-table-column prop="createTime" label="创建时间" width="200" sortable align="center"/>
					<el-table-column prop="updateTime" label="更新时间" width="200" sortable align="center"/>
					<el-table-column label="操作" align="center" width="200" fixed="right">
						<template #default="scope">
							<div style="text-align: right">
								<el-button v-show="scope.row.deptType=='0'" size="small" type="success" plain
								           @click="handleAddClick(1, scope.$index, scope.row)">新增
								</el-button>
								<el-button size="small" type="warning" plain
								           @click="handleEditClick(scope.row.children?0:1, scope.$index, scope.row)">编辑
								</el-button>
								<el-popconfirm class="box-item" width="180"
								               :title="'确定删除 【'+scope.row.deptName+'】 ？'"
								               icon="" placement="top" confirm-button-type="danger"
								               confirm-button-text="删除"
								               @confirm="handleDelete(scope.row.deptType=='0'?0:1, scope.$index, scope.row)"
								               persistent>
									<template #reference>
										<!--									@click="handleDelete(scope.$index, scope.row)"-->
										<el-button size="small" type="danger" plain>删除</el-button>
									</template>
									<template #actions="{ confirm, cancel }">
										<div class="btn-group" style="text-align: center">
											<el-button size="small" @click="cancel">取消</el-button>
											<el-button type="danger" size="small" @click="confirm">删除</el-button>
										</div>
									</template>
								</el-popconfirm>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
			<div class="main-dialog">
				<!--新增/修改 对话框-->
				<el-dialog v-model="data.dialog.visible" :title="data.dialog.title" center align-center draggable
				           overflow
				           :show-close="false" width="30vw" :before-close="handleClose">
					<div class="dialog-wrap" style="margin: 20px">
						<el-form :model="data.editForm">
							<el-form-item label="公司名称" label-width="100">
								<el-input v-model="data.editForm.companyName" :disabled="data.dialog.isButton"/>
							</el-form-item>
							<el-form-item v-show="data.dialog.isButton" label="部门名称" label-width="100">
								<el-input v-model="data.editForm.deptName"/>
							</el-form-item>
							<el-form-item label="负责人" label-width="100">
								<el-input v-model="data.editForm.deptPrincipalId"/>
							</el-form-item>
							<el-form-item label="负责人电话" label-width="100">
								<el-input v-model="data.editForm.deptPrincipalPhone"/>
							</el-form-item>
							<el-form-item label="负责人邮箱" label-width="100">
								<el-input v-model="data.editForm.deptPrincipalEmail"/>
							</el-form-item>
						</el-form>
					</div>
					<template #footer>
						<div class="dialog-footer">
							<el-button @click="handleClose()" style="margin-right: 5vw">取消</el-button>
							<el-button v-if="data.dialog.btnName=='新增'" type="primary"
							           @click="addData(!data.dialog.isButton?0:1)">新增
							</el-button>
							<el-button v-else type="warning" @click="editData(!data.dialog.isButton?0:1)">编辑</el-button>
						</div>
					</template>
				</el-dialog>
				<!--删除 对话框-->
				<el-dialog v-model="data.deleteDialog.visible" title="警告" center align-center draggable overflow
				           :show-close="false" width="30vw" :before-close="handleDeleteClose">
					<h3 style="color: red; text-align: center;">该操作会删除【{{ data.deleteDialog.deleteName }}】下的所以部门！<br>请谨慎操作！<br>
					</h3>
					<p style="text-align: center; margin:3vh auto 5vh auto">是否继续？</p>
					<div class="dialog-footer" style="text-align: center">
						<el-button @click="data.deleteDialog.visible=false; infoMessage(true,'已取消')"
						           style="margin-right: 5vw">取消
						</el-button>
						<el-button type="danger" @click="data.deleteDialog.visible=false; handleDeleteForTreeId()">删除
						</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
		<!--空状态-->
		<div v-if="false" class="main-content">
			<el-button type="primary" @click="handleAddClick(0)">新增公司</el-button>
			<el-empty description="无数据"/>
		</div>
	</div>

</template>

<script setup lang="ts">
import { reqAdd, reqDelete, reqDeleteList, reqDeleteTree, reqEdit, reqGetDeptTree } from '@/service/main/dept.ts'
import { errorMessage, infoMessage, successMessage } from '@/utils/ElMessageUtils.ts'
import { reactive } from 'vue'

// 数据内容。
let data = reactive({
	dialog: {
		visible: false,
		title: '新增公司',
		isButton: false,
		btnName: ''
	},
	deleteDialog: {
		visible: false,
		deptId: '',
		deleteName: ''
		
	},
	// 搜索条件。
	searchForm: {},
	// 添加/编辑表单。
	editForm: {},
	deleteList: [],
	// 列表展示内容。
	list: []
})

/********************************************* API接口 ************************************************************/
// 获取部门。
const dataTree = function getDeptTree(searchData = null) {
	reqGetDeptTree(searchData).then(res => {
		console.log('reqGetDeptTree.res ====> ', res)
		if (res.resultStatus) {
			data.list = res.resultData
		} else {
			errorMessage(true, '动态菜单获取失败！！')
		}
	})
}
dataTree()

// 搜索框。
function handleSearchClick() {
	dataTree(data.searchForm)
}

// 添加数据。
function addData(type) {
	switch (type) {
		case 0: // 公司
			data.editForm.deptName = data.editForm.companyName
			break
		case 1: // 部门
			break
	}
	reqAdd(data.editForm).then(res => {
		if (res.resultStatus) {
			console.log('res!', res)
			successMessage(true, res.resultData)
			dataTree()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
	data.dialog.visible = false
	// handleSearchClick()
}

// 修改数据。
function editData(type) {
	console.log('type =========>', type)
	switch (type) {
		case 0: // 公司
			data.editForm.deptName = data.editForm.companyName
			break
		case 1: // 部门
			break
	}
	reqEdit(data.editForm).then(res => {
		if (res.resultStatus) {
			console.log('res!', res)
			successMessage(true, res.resultData)
			dataTree()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
	data.dialog.visible = false
}

/**
 * 单条删除。
 * @param type
 * @param index
 * @param row
 */
function handleDelete(type, index, row) {
	console.log('handleDelete.row =====>  ', row)
	switch (row.deptType) {
		case 0: // 公司。
		case '0': // 公司。
			data.deleteDialog.visible = true
			data.deleteDialog.deleteName = row.deptName
			data.deleteDialog.deptId = row.deptId
			break
		case 1: // 部门。
		case '1': // 部门。
			reqDelete(row.deptId).then(res => {
				if (res.resultStatus) {
					console.log('res!', res)
					successMessage(true, res.resultData)
					dataTree()
					formClear()
				} else {
					errorMessage(true, res.errorMessage)
				}
			})
			break
	}
}

/**
 * 根据id删除其子元素内容。
 */
function handleDeleteForTreeId() {
	reqDeleteTree(data.deleteDialog.deptId).then(res => {
		if (res.resultStatus) {
			console.log('res!', res)
			successMessage(true, res.resultData)
			dataTree()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

// 批量删除。
function handleDeleteList() {
	let idList = {
		idList: []
	}
	data.deleteList.forEach((item) => {
		console.log('item ====>', item)
		idList.idList.push(item.deptId)
	})
	// console.log("ids =====>",ids)
	reqDeleteList(idList).then(res => {
		if (res.resultStatus) {
			console.log('res!', res)
			successMessage(true, res.resultData)
			dataTree()
			formClear()
		} else {
			errorMessage(true, res.errorMessage)
		}
	})
}

/********************************************* 事件 ************************************************************/


// 重置搜索框。
function resetSearchClick() {
	data.searchForm = {}
}

/**
 * 添加 公司/部门。
 * @param type
 * @param index
 * @param row
 */
function handleAddClick(type: Number, index = null, row = null) {
	switch (type) {
		case 0: // 公司。
			console.log('添加公司！')
			data.dialog = {
				visible: true,
				title: '新增公司',
				isButton: false,
				btnName: '新增'
			}
			break
		case 1: // 部门。
			console.log('添加部门！')
			data.dialog = {
				visible: true,
				title: '新增部门',
				isButton: true,
				btnName: '新增'
			}
			console.log('row ===>', row)
			data.editForm.deptParentId = row.deptId
			data.editForm.companyName = row.deptName
			break
	}
	
}

/**
 * 编辑 公司/部门。
 * @param type
 * @param index
 * @param row
 */
function handleEditClick(type: Number, index = null, row = null) {
	switch (type) {
		case 0: // 公司。
			data.dialog = {
				visible: true,
				title: '编辑公司',
				isButton: false,
				btnName: '编辑'
			}
			console.log('row =====> ', row)
			data.editForm = row
			data.editForm.companyName = row.deptName
			break
		case 1: // 部门。
			data.dialog = {
				visible: true,
				title: '编辑部门',
				isButton: true,
				btnName: '编辑'
			}
			console.log('row =====> ', row)
			data.editForm = row
			data.editForm.companyName = row.deptParentName
			data.editForm.deptName = row.deptName
			break
	}
}

/**
 * 批量删除。
 */
function handleDeleteListClick(newSelection) {
	data.deleteList = newSelection
	console.log('newSelection ====>', newSelection)
	console.log('批量删除！')
}


/********************************************* 初始化数据 ************************************************************/
// 清除垃圾数据。
function formClear() {
	data.editForm = {}
	data.dialog = {
		visible: false,
		title: '',
		isButton: false,
		btnName: '新增'
	}
}

// 关闭新增/修改弹窗。
function handleClose() {
	formClear()
	infoMessage(true, '已取消')
}

// 关闭删除弹窗。
function handleDeleteClose() {
	data.deleteDialog.visible = false
	infoMessage(true, '已取消')
}

</script>

<style scoped lang="less">
.main-search {
	background-color: white;
	margin-bottom: 20px;
	padding: 5vh 0 2vh 5vw;
	border-radius: 10px;
}

.main-content {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
}

.main-content-btn {
	margin-bottom: 20px;
}

:global(.el-popconfirm__main) {
	color: red;
	text-align: center;
	white-space: pre-line;
}

//:global(.el-popover){
//	background-color: #333333;
//}
</style>